/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import Taro, { Component, getUserInfo } from '@tarojs/taro'
import { Swiper, Navigator, ScrollView } from '@tarojs/components'

// project
import { CPage, CContent, CHeader, CFooter, CFloat, CAround, CBetween, CCenter, CRow, CWrap, CLine, CHand, CItemX, CItemY, CText, CLabel, CSvg, CImage, CButton , CColumn } from '../../library/comp';
import { Base64, Gen, Time, Zip, Session, Storage, Http, Toast } from '../../library/func';
import Icon from '../../project/style/icon';

import ConfigNet from '../../project/func/http/http'

/******************************************************************************************
 * Export Class
 ******************************************************************************************/

export default class Index extends Component {

	/*------------------------------------------------------------------------------------
	 * 初始化
	 *-----------------------------------------------------------------------------------*/
	constructor(props) {
		super(props);

		/**
		 * state
		 */
		this.state = {
			// 商品id
			id: 0,

			// 商品详情
			detail: {},

			// 商品评论
			comment: {},

			// 评论数量，图片
			comment_image_count: 0,
			comment_total_count: 0,

			// recommend商品推荐
			recommend: [],

			// tab 默认
			index: 0,

			// 用户信息
			userInfo: {},

			//商品件数
			buycount:1,

		}
	}

	/*------------------------------------------------------------------------------------
	 * 生命周期
	 *-----------------------------------------------------------------------------------*/
	// willMont
	componentWillMount() {
        this.setState({
			id: this.$router.params.id
		})

		// 获取用户信息，判定身份
		ConfigNet.get({
			url: 'usercenter/info.php',
			
			success: (data)=> {
				console.log('用户信息', data)
				this.setState({
					userInfo: data
				})
			},
			error: (res)=> {
				console.log('逻辑错误');
				console.log(res);
			},
		});
	}
	
	// didMount
	componentDidMount() {
		// 获取详情数据
		ConfigNet.get({
			url: 'product/detail.php',
			data: {
				id : this.$router.params.id
			},
			success: (data)=> {
				console.log('分享素材', data)
				this.setState({
					detail: data.product,
					recommend: data.recommend,
					comment: data.comment[0],
					comment_image_count: data.comment_image_count,
					comment_total_count: data.comment_total_count,
				})
			},
			error: (res)=> {
				console.log('逻辑错误');
				console.log(res);
			},
		});

		// 获取商品评论
		ConfigNet.get({
			url: 'product/comment.php',
			data: {
				pid : this.$router.params.id
			},
			success: (data)=> {
				this.setState({
					comment: data[0]
				})
			},
			error: (res)=> {
				console.log('逻辑错误');
				console.log(res);
			},
		});
	}
	
	/*------------------------------------------------------------------------------------
	 * 事件处理
	 *-----------------------------------------------------------------------------------*/
    
	
	


	/*------------------------------------------------------------------------------------
	 * 自定义方法
	 *-----------------------------------------------------------------------------------*/
	config = {
        navigationBarTitleText: '商品详情',
        navigationBarBackgroundColor: '#dd2f3c',
        navigationBarTextStyle: '#fff'
    }
	// 商品详情、常见问题tab 切换
	tab(e){
		alert(1)
        if(e.currentTarget.dataset.tab == 2){
            this.setState(()=>{return{tab:false}})
        }else{
            this.setState(()=>{return{tab:true}})
        }
	}
	
	// onTabClick tab 点击
	onTabClick = (index, e)=> {
		this.setState({
			index: index
		})
	}

	// sub 数量减
	sub = (e)=> {
		if(this.state.buycount == 1){
			Toast.text("商品数量不能小于1件");
			return;
		}
		this.setState({
			buycount:this.state.buycount - 1
		})
	}

	// add 数量加
	add = (e)=> {
		this.setState({
			buycount:this.state.buycount + 1
		})
	}


	// 购物车跳转
    goCart = (url, e)=> {
		wx.switchTab({
            url: url
        })
		console.log('urllllllllllllll',url)
	}

	//关注或者取消关注
	collect = (e)=>{

		let detail = this.state.detail;
		let c_type = this.state.detail.is_collect ? 'cancel':'collect';
		let c_str = this.state.detail.is_collect ? '取消关注成功':'关注成功';
		let is_collect = this.state.detail.is_collect ? 0:1;
		
		

		ConfigNet.post({
			url:'product/logic/collect.php',
			data:{
				pid:this.state.id,
				type:c_type
			},
			success:(res)=>{
				detail.is_collect = is_collect;
				Toast.text(c_str);
				this.setState({
					detail:detail
				})
			}
		})
	}


	//加入购物车
	subCart(){
		ConfigNet.post({
			url:'cart/logic/add.php',
			data:{
				pid:this.state.id,
				cid1:this.state.detail.fk_cid1,
				cid2:this.state.detail.fk_cid2,
				count:this.state.buycount,
			},
			success:(res) => {
				console.log('resssssssssssssssss',res)
				Toast.success("添加到购物车");
			},error(err){
				console.log('errrrrrrrrrrr',err)
				Toast.text(err.msg);
			}
		});
	}

	// 提示 暂未开启此功能
	toToast() {
		Toast.text('暂未开启此功能')
	}

	/*------------------------------------------------------------------------------------
	 * 渲染
	 *-----------------------------------------------------------------------------------*/
	render () {
		return (
			<CPage>
				<CContent mb='50' bg='#f2f2f2'>
					
					{/* swiper */}
					<Swiper indicatorColor='#999' indicatorActiveColor='#333' circular indicatorDots autoplay style='height:600rpx'>
						{this.state.detail.object.set_image_big.map(swiper => {
							return (
								<SwiperItem>
									<View className='demo-text-1'>
										<Image lazyLoad={true} style='width:100%; height:600rpx; background:#eee' src='http://image.cdn.hesq.com.cn/rushbuy/product/{{swiper}}'/>
									</View>
								</SwiperItem>
							)
						})}
					</Swiper>

					{/* 价格与关注 */}
					<CBetween pa='30 40' bg='#fff'>
						<CItemY x='left'>
							<CItemX y='center'>
								<CHand color='#d9000d' y='center' x='center'>
									<CText size='30' color='#d9000d' mt='12' style='font-weight:bold;'>￥</CText>
									<CHand size='50' ml='4' bold>{detail.set_price}</CHand>
								</CHand>
								<CLabel bg='#fee0e0' ra='100' color='#f92530' px='10' ml='20'>促销价</CLabel>
							</CItemX>
							<CItemX y='center' mt='8'>
								<CText color='#8b8b8b' size='26'>价格:</CText>
								<CHand size='26' ml='10' class='del'>￥{detail.set_original_price}</CHand>
							</CItemX>
						</CItemY>
						<CItemY onClick={ this.collect.bind(this) }>
							{ this.state.detail.is_collect ?
							<CItemY x="center">
								<CSvg w='40' h='40' color='#4d4d4d' icon={Icon.heart} />
								<text style="font-size:24rpx; color:#4d4d4d">已关注</text>
							</CItemY>
							: 
							<CItemY x="center">
								<CSvg w='40' h='40' color='#4d4d4d' icon={Icon.follow} />
								<text style="font-size:24rpx; color:#4d4d4d">关注</text>
							</CItemY>
							}
						</CItemY>
					</CBetween>

					{/* 商品名称 */}
					<CHand px='30' size='30' bg='#fff' bold color='#5c5c5c'>{detail.set_name}</CHand>

					{/* 包邮、销量、始发地 */}
					<CBetween pa='20' bg='#fff'>
						{/* <CText>包邮</CText>
						<CHand color='#333' size='12'>销量{detail.count_sale}</CHand>
						<CText>北京市</CText> */}
					</CBetween>

					{/* 24小时发货、交易保障、7天退换货 */}
					<CBetween mt='20' pa='20 30' bg='#fff'>
						<CItemX y='center'>
							<CSvg w='55' h='55' color='#d01f1f' icon={Icon["service-modal"]}></CSvg>
							<CText size='28' color='#8b8b8b' pl='4'>24小时发货</CText>
						</CItemX>
						<CItemX y='center'>
							<CSvg w='55' h='55' color='#d01f1f' icon={Icon["service-modal"]}></CSvg>
							<CText size='28' color='#8b8b8b' pl='4'>交易保障</CText>
						</CItemX>
						<CItemX y='center'>
							<CSvg w='55' h='55' color='#d01f1f' icon={Icon["service-modal"]}></CSvg>
							<CText size='28' color='#8b8b8b' pl='4'>7天退换货</CText>
						</CItemX>
					</CBetween>

					{/* 分享素材,只vip可见 */}

					{/* {userInfo.is_vip == 1 && 
					<CColumn mt='20' pa='20' bg='#fff'>
						<CBetween py='20'>
							<CText>分享素材</CText>
							<CSvg w='20' h='20' icon={Icon.right}></CSvg>
						</CBetween>
						<CAround>
							{this.state.detail.object.set_image_share.map(share => {
								return(
									<Image lazyLoad={true} style='width:210rpx; height:210rpx' src='http://image.cdn.hesq.com.cn/rushbuy/product/{{share.object.set_image_share}}'></Image>
								)
							})}
						</CAround>
						<CCenter mt='30'>
							<CText ba='2 solid #ccc' ra='100' pa='10 20' size='24' onClick={this.toToast}>查看所有</CText>
						</CCenter>
					</CColumn>} */}

					{/* 买家评价 */}
					{/* <CColumn mt='20' bg='#fff' pb='20'>
						<CBetween pa='30'>
							<CHand size='26' color='#494949'>买家评论 ({comment_total_count})</CHand>
							<CSvg w='20' h='20' color='#cbcbcb' icon={Icon.right}></CSvg>
						</CBetween>
						<CLine px='30'>
							<CItemX y='center'>
								<CImage w='40' h='40' ra='20' src='{{comment.user_object.set_head}}'></CImage>
								<CHand color='#333' size='24' ml='20'>{comment.user_object.set_nick}</CHand>
							</CItemX>
						</CLine>
						<CHand pa='20 30' color='#333' size='24' lh='48'>{comment.object.set_content}</CHand>
						<CCenter>
							<Navigator url="/screen/product/comment?id={{detail.id}}&comment_image_count={{comment_image_count}}&comment_total_count={{comment_total_count}}" hover-class='none'>
								<CText ba='2 solid #ccc' ra='100' pa='10 20' size='24' color='#777'>查看所有评价</CText>
							</Navigator>
						</CCenter>
					</CColumn> */}

					{/* 为你推荐 */}
					<CColumn bg='#fff' mt='20' pa='20'>
						<CCenter align='center' py='10'>
							<CText color='#e33f3e' size='28'>为你推荐</CText>
						</CCenter>

						<ScrollView scrollX style='width: 100%; height: 380rpx'>
							<CAround pt='20' x='left'>
								{this.state.recommend.map(product => {
									let url = '/screen/product/detail?id=' + product.id;
									let image = 'http://image.cdn.hesq.com.cn/rushbuy/product/' + product.object.set_image_small;
									let name = product.set_name;
									if (name.length > 13) {
										name = name.substr(0, 13) + '...';
									}
									return(
										<Navigator url={url} hover-class='none'>
											<CItemY mx='25'>
												<Image lazyLoad={true} style='width:190rpx; height:190rpx' src={image}></Image>
												<CColumn x='center'>
													<CHand size='24' color='#797979'>{name}</CHand>
													<CHand size='28' color='#2e2e2e' mt='6'>￥{product.set_price}</CHand>
													<CHand size='24' color='#989898' class='del'>￥{product.set_original_price}</CHand>
												</CColumn>
											</CItemY>
										</Navigator>
									)
								})}
							</CAround>
						</ScrollView>
					</CColumn>

					{/* 商品详情、常见问题 tab */}
					<CAround bg='#fff' h='100' lh='100' mt='20' bb='1 solid #eee'>
						<CHand size='30' class={this.state.index == 0 ? 'detailActive' : ' '} onClick={this.onTabClick.bind(this, 0)}>商品详情</CHand>
						<CHand size='30' class={this.state.index == 1 ? 'detailActive' : ' '} onClick={this.onTabClick.bind(this, 1)}>常见问题</CHand>
					</CAround>
					<Swiper current={this.state.index} circular onChange={this.onSwiperChange} style='background:#fff; padding:20rpx 40rpx'>
						<SwiperItem>
							<CHand size='24' >{detail.object.set_detail}</CHand>
						</SwiperItem>
						<SwiperItem>
							{/* <CHand>{detail.object.set_faq}</CHand> */}
						</SwiperItem>
					</Swiper>
					
				</CContent>

				{/* 商品详情页Footer */}
				<CFooter h='100' bg='#fff' bt='1 solid #eee'>
					<CBetween>
						<CHand class='f01' h='100' y='center' pl='10' onClick={this.goCart.bind(this, '/screen/order/cart')} >
							{/*<CHand style="position: absolute; left:40rpx; top:20rpx" ra="30" px="10" h='30' bg='#f00' color="white" size="20" x="center" y="center">{ this.state.buycount }</CHand>*/}
							<CSvg w='60' h='60' icon={Icon.cart} color='#737373'></CSvg>
						</CHand>
						 {userInfo.is_vip == 1 && 
						 	<CLine x='right'>
								 <CAround class='f03' h='100' y='center'>
									<CSvg w='40' h='40' icon={Icon.sub} onClick={this.sub.bind(this, detail.id)}></CSvg>
									<CHand>{buycount}</CHand>
									<CSvg w='40' h='40' icon={Icon.add} onClick={this.add.bind(this, detail.id)}></CSvg>
								</CAround>
								<CItemY class='f03' h='100' bg='#f93313' y='center' color='#fff' size='28' onClick={this.subCart.bind(this)}>
									<CText color='#fff'>购买</CText>
									<CHand>省 3.00</CHand>
								</CItemY>
								<CItemY class='f03' h='100' bg='#fab201' y='center' color='#fff' size='28' onClick={this.toToast}>
									<CText color='#fff'>推广</CText>
									<CHand>赚 3.00</CHand>
								</CItemY>
							</CLine>
							
						}
						{userInfo.is_vip == 0 && 
							<CLine x='right'>
								<CAround class='f03' h='100' x="center" y='center'>
									<CSvg w='40' h='40' mr="20" color='#8d8d8d' icon={Icon.sub} onClick={this.sub.bind(this, detail.id)}></CSvg>
									<text style="font-size:30rpx">{ this.state.buycount }</text>
									<CSvg w='40' h='40' ml="20" color='#ce1110' icon={Icon.add} onClick={this.add.bind(this, detail.id)}></CSvg>
								</CAround>
								<CText class='f06' h='100' lh='100' bg='#f5a915' x='center' color='#fff' size='28' onClick={this.subCart.bind(this)}>加入购物车</CText>
							</CLine>
							
						}
					</CBetween>
				</CFooter>
				 
				
			</CPage>
		)
	}
}


